<template>
    <div>
        <el-form :model="queryParams" ref="queryRef" :inline="true">
         <el-form-item label="节点名称" prop="fileName">
            <el-input
               v-model="queryParams.fileName"
               placeholder="请输入节点内容"
               clearable
			    style="width: 200px"
            />
         </el-form-item>
         <el-form-item>
            <el-button icon="Refresh" @click="resetQuery">刷新</el-button>
         </el-form-item>
      </el-form>
      <el-tree
      ref="treeRef"
      style="max-width: 600px"
      :data="dataSource"
      :props="treeProps"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
    >
    <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span class="truncate">
            <el-icon v-show="data.isDir"><Folder color="#F5C800" /></el-icon>
            <el-icon v-show="!data.isDir"><Document color="#F5C800"/></el-icon>
            {{ node.label }}</span>
          <span class="custom-tree-node-btn">
            <a @click="moveFile(node, data)"><el-icon><Sort /></el-icon></a>
            <a @click="rename(node, data)"><el-icon><EditPen /></el-icon></a>
            <a @click="remove(node, data)"><el-icon><CloseBold /></el-icon></a>
          </span>
        </span>
    </template>
    </el-tree>
    </div>
     <!-- 重命名弹窗 -->
     <el-dialog title="重命名" v-model="renameOpen" width="440px" append-to-body>
        <el-form :model="renameForm" ref="renameRef" :inline="true" >
        <el-form-item label="当前名称" prop="name">
            <el-input
            v-model="renameForm.name"
            readonly
            style="width: 300px"
            />
        </el-form-item>
        <el-form-item label="修改名称" prop="rename">
            <el-input
            v-model="renameForm.rename"
            style="width: 300px"
            />
        </el-form-item>

        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="submitRename">提 交</el-button>
            <el-button @click="closeRename">取 消</el-button>
        </div>
        </template>
    </el-dialog>
     <!-- 移动选择文件夹弹窗 -->
     <el-dialog :title="'将 ' + moveTitle + ' 移动到:'" v-model="moveOpen" width="500px" append-to-body>
        <el-form :model="moveForm" ref="moveRef" :inline="true" >
            <el-form :model="queryMoveParams" ref="queryMoveRef" :inline="true">
                <el-form-item label="节点名称" prop="fileName">
                    <el-input
                    v-model="queryMoveParams.fileName"
                    placeholder="请输入节点内容"
                    clearable
                     style="width: 200px"
                    />
                </el-form-item>
            </el-form>
            <el-tree
                ref="moveTreeRef"
                style="max-width: 600px"
                :data="moveDataSource"
                :props="treeProps"
                node-key="id"
                default-expand-all
                show-checkbox
                :check-strictly="true"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @check-change="handleNodeClick"
                >
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                    <span class="truncate">
                        <el-icon v-show="data.isDir"><Folder color="#F5C800" /></el-icon>
                        <el-icon v-show="!data.isDir"><Document color="#F5C800"/></el-icon>
                        {{ node.label }}</span>
                    </span>
                </template>
                </el-tree>

        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="submitMove">提 交</el-button>
            <el-button @click="closeMove">取 消</el-button>
        </div>
        </template>
    </el-dialog>
  </template>
  
<script setup name="dirManageModal">
import { getCurrentInstance } from '@vue/runtime-core';
const { proxy } = getCurrentInstance();
import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
import { ref,reactive,watch } from 'vue';
import { getTree,deleteByIds,deleteByUrl,updateByName,getDirTree,move } from "./fileManagerApi";
import { defineEmits } from 'vue';
const queryParams=reactive({
    fileName:''
});
const treeRef = ref(null);
watch(queryParams, (val) => {
  treeRef.value.filter(val.fileName)
})
const filterNode = (value, data) => {
  if (!value) return true
  return data.title.includes(value)
}

// 定义触发的事件及其数据类型
const emit = defineEmits(['childGetList']);

const treeProps=reactive({
  children: 'children',
  label: 'title',
  isLeaf:'isDir'
});


function resetQuery() {
  queryParams.fileName = '';
  handleQuery();
}
function handleQuery(){
    getTree().then(response => {
       // Object.assign(dataSource, response.data); 
       //演示数据
       Object.assign(dataSource, [
  {
    "checkArr": "0",
    "children": [
      {
        "checkArr": "0",
        "children": [],
        "createTime": "2025-01-03 10:14:19",
        "fileName": "2025/01/03/sampling_3_20250103101419A004.mp4",
        "flag": 0,
        "id": 1971400705,
        "isDir": false,
        "isImg": false,
        "name": "sampling_3",
        "parentId": -2063519742,
        "putTime": "2025-01-03 10:14:19",
        "size": 1853718,
        "spread": true,
        "suffix": "mp4",
        "title": "sampling_3.mp4",
        "type": "mp4",
        "url": "http://127.0.0.1:9000/test/2025/01/03/sampling_3_20250103101419A004.mp4"
      }
    ],
    "createTime": "2025-01-03 10:13:51",
    "flag": 0,
    "id": -2063519742,
    "isDir": true,
    "isImg": false,
    "name": "视频",
    "parentId": -1,
    "spread": true,
    "title": "视频",
    "type": "dir"
  },
  {
    "checkArr": "0",
    "children": [
      {
        "checkArr": "0",
        "children": [
          {
            "checkArr": "0",
            "children": [
              {
                "checkArr": "0",
                "children": [],
                "createTime": "2025-01-03 11:45:20",
                "fileName": "2025/01/03/567567_20250103114519A012.png",
                "flag": 0,
                "id": 536911873,
                "isDir": false,
                "isImg": true,
                "name": "567567",
                "parentId": -2076102654,
                "putTime": "2025-01-03 11:45:20",
                "size": 1948,
                "spread": true,
                "suffix": "png",
                "title": "567567.png",
                "type": "png",
                "url": "http://127.0.0.1:9000/test/2025/01/03/567567_20250103114519A012.png"
              },
              {
                "checkArr": "0",
                "children": [],
                "createTime": "2025-01-03 10:14:40",
                "fileName": "2025/01/03/微信截图_20230621102820_20250103101439A007.png",
                "flag": 0,
                "id": 1686188033,
                "isDir": false,
                "isImg": true,
                "name": "微信截图_20230621102820",
                "parentId": -2076102654,
                "putTime": "2025-01-03 10:14:40",
                "size": 37856,
                "spread": true,
                "suffix": "png",
                "title": "微信截图_20230621102820.png",
                "type": "png",
                "url": "http://127.0.0.1:9000/test/2025/01/03/微信截图_20230621102820_20250103101439A007.png"
              },
              {
                "checkArr": "0",
                "children": [],
                "createTime": "2025-01-03 10:14:19",
                "fileName": "2025/01/03/paper-planes_20250103101419A005.mp4",
                "flag": 0,
                "id": 876687362,
                "isDir": false,
                "isImg": false,
                "name": "paper-planes",
                "parentId": -2076102654,
                "putTime": "2025-01-03 10:14:19",
                "size": 21093317,
                "spread": true,
                "suffix": "mp4",
                "title": "paper-planes.mp4",
                "type": "mp4",
                "url": "http://127.0.0.1:9000/test/2025/01/03/paper-planes_20250103101419A005.mp4"
              },
              {
                "checkArr": "0",
                "children": [],
                "createTime": "2025-01-03 10:14:06",
                "fileName": "2025/01/03/rain_20250103101406A003.png",
                "flag": 0,
                "id": 37826561,
                "isDir": false,
                "isImg": true,
                "name": "rain",
                "parentId": -2076102654,
                "putTime": "2025-01-03 10:14:06",
                "size": 1391,
                "spread": true,
                "suffix": "png",
                "title": "rain.png",
                "type": "png",
                "url": "http://127.0.0.1:9000/test/2025/01/03/rain_20250103101406A003.png"
              },
              {
                "checkArr": "0",
                "children": [],
                "createTime": "2025-01-03 10:14:06",
                "fileName": "2025/01/03/cloud_20250103101406A002.png",
                "flag": 0,
                "id": 37826562,
                "isDir": false,
                "isImg": true,
                "name": "cloud",
                "parentId": -2076102654,
                "putTime": "2025-01-03 10:14:06",
                "size": 1059,
                "spread": true,
                "suffix": "png",
                "title": "cloud.png",
                "type": "png",
                "url": "http://127.0.0.1:9000/test/2025/01/03/cloud_20250103101406A002.png"
              },
              {
                "checkArr": "0",
                "children": [],
                "createTime": "2025-01-03 10:14:06",
                "fileName": "2025/01/03/sun_20250103101406A001.png",
                "flag": 0,
                "id": 100741122,
                "isDir": false,
                "isImg": true,
                "name": "sun",
                "parentId": -2076102654,
                "putTime": "2025-01-03 10:14:06",
                "size": 1177,
                "spread": true,
                "suffix": "png",
                "title": "sun.png",
                "type": "png",
                "url": "http://127.0.0.1:9000/test/2025/01/03/sun_20250103101406A001.png"
              }
            ],
            "createTime": "2025-01-03 10:13:42",
            "flag": 0,
            "id": -2076102654,
            "isDir": true,
            "isImg": false,
            "name": "图片",
            "parentId": -1870581758,
            "spread": true,
            "title": "图片",
            "type": "dir"
          },
          {
            "checkArr": "0",
            "children": [
              {
                "checkArr": "0",
                "children": [],
                "createTime": "2025-01-03 10:15:25",
                "fileName": "2025/01/03/安全自检自查 (3)_20250103101525A009.xlsx",
                "flag": 0,
                "id": 373370883,
                "isDir": false,
                "isImg": false,
                "name": "安全自检自查 (3)",
                "parentId": -369053695,
                "putTime": "2025-01-03 10:15:25",
                "size": 47658,
                "spread": true,
                "suffix": "xlsx",
                "title": "安全自检自查 (3).xlsx",
                "type": "xlsx",
                "url": "http://127.0.0.1:9000/test/2025/01/03/安全自检自查 (3)_20250103101525A009.xlsx"
              }
            ],
            "createTime": "2025-01-03 10:36:57",
            "flag": 0,
            "id": -369053695,
            "isDir": true,
            "isImg": false,
            "name": "测试音乐",
            "parentId": -1870581758,
            "spread": true,
            "title": "测试音乐",
            "type": "dir"
          }
        ],
        "createTime": "2025-01-03 10:18:13",
        "flag": 0,
        "id": -1870581758,
        "isDir": true,
        "isImg": false,
        "name": "子音乐",
        "parentId": -1702809598,
        "spread": true,
        "title": "子音乐",
        "type": "dir"
      },
      {
        "checkArr": "0",
        "children": [],
        "createTime": "2025-01-03 10:14:40",
        "fileName": "2025/01/03/微信截图_20230621102815_20250103101439A006.png",
        "flag": 0,
        "id": 1686188034,
        "isDir": false,
        "isImg": true,
        "name": "微信截图_20230621102815",
        "parentId": -1702809598,
        "putTime": "2025-01-03 10:14:40",
        "size": 39406,
        "spread": true,
        "suffix": "png",
        "title": "微信截图_20230621102815.png",
        "type": "png",
        "url": "http://127.0.0.1:9000/test/2025/01/03/微信截图_20230621102815_20250103101439A006.png"
      }
    ],
    "createTime": "2025-01-03 10:13:47",
    "flag": 0,
    "id": -1702809598,
    "isDir": true,
    "isImg": false,
    "name": "音乐",
    "parentId": -1,
    "spread": true,
    "title": "音乐",
    "type": "dir"
  },
  {
    "checkArr": "0",
    "children": [
      {
        "checkArr": "0",
        "children": [],
        "createTime": "2025-01-03 13:42:48",
        "fileName": "2025/01/03/安全自检自查 (3) (1)_20250103134247A013.xlsx",
        "flag": 0,
        "id": -838819839,
        "isDir": false,
        "isImg": false,
        "name": "安全自检自查111",
        "parentId": -1233047551,
        "putTime": "2025-01-03 13:42:48",
        "size": 47658,
        "spread": true,
        "suffix": "xlsx",
        "title": "安全自检自查111.xlsx",
        "type": "xlsx",
        "url": "http://127.0.0.1:9000/test/2025/01/03/安全自检自查 (3) (1)_20250103134247A013.xlsx"
      },
      {
        "checkArr": "0",
        "children": [],
        "createTime": "2025-01-03 10:15:25",
        "fileName": "2025/01/03/安全自检自查_20250103101525A011.xlsx",
        "flag": 0,
        "id": 373370882,
        "isDir": false,
        "isImg": false,
        "name": "安全自检自查",
        "parentId": -1233047551,
        "putTime": "2025-01-03 10:15:25",
        "size": 10771,
        "spread": true,
        "suffix": "xlsx",
        "title": "安全自检自查.xlsx",
        "type": "xlsx",
        "url": "http://127.0.0.1:9000/test/2025/01/03/安全自检自查_20250103101525A011.xlsx"
      }
    ],
    "createTime": "2025-01-03 10:13:39",
    "flag": 0,
    "id": -1233047551,
    "isDir": true,
    "isImg": false,
    "name": "文件",
    "parentId": -1,
    "spread": true,
    "title": "文件",
    "type": "dir"
  },
  {
    "checkArr": "0",
    "children": [
      {
        "checkArr": "0",
        "children": [],
        "createTime": "2025-01-06 09:41:27",
        "fileName": "2025/01/06/微信图片_20250103160846_20250106094127A002.jpg",
        "flag": 0,
        "id": -1509928958,
        "isDir": false,
        "isImg": true,
        "name": "bdn",
        "parentId": -528461822,
        "putTime": "2025-01-06 09:41:27",
        "size": 83771,
        "spread": true,
        "suffix": "jpg",
        "title": "bdn.jpg",
        "type": "jpg",
        "url": "http://127.0.0.1:9000/test/2025/01/06/微信图片_20250103160846_20250106094127A002.jpg"
      }
    ],
    "createTime": "2025-01-06 09:39:35",
    "flag": 0,
    "id": -528461822,
    "isDir": true,
    "isImg": false,
    "name": "其他",
    "parentId": -1,
    "spread": true,
    "title": "其他",
    "type": "dir"
  },
  {
    "checkArr": "0",
    "children": [],
    "createTime": "2025-01-03 13:45:06",
    "flag": 0,
    "id": 624992257,
    "isDir": true,
    "isImg": false,
    "name": "游戏",
    "parentId": -1,
    "spread": true,
    "title": "游戏",
    "type": "dir"
  }
])
     });
}
handleQuery();
const dataSource = reactive([]);

//删除节点
function remove(node, data) {
  if (node.data.isDir) {
    //是文件夹
    ElMessageBox.confirm('该文件夹内所有文件都将被删除，你可想好了？', "系统提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    }).then(function() {
        return deleteByIds({id: node.data.id});
    }).then(() => {
        handleQuery();
        emit('childGetList');
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }else{
    ElMessageBox.confirm('确认删除此文件么？', "系统提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    }).then(function() {
        return deleteByUrl({url: node.data.url});
    }).then(() => {
        handleQuery();
        emit('childGetList');
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }
}

//重命名
const renameOpen=ref(false);
const renameForm = ref({
    id: '',
    name: '',
    rename: ''
});
function rename(node,data) {
    renameOpen.value=true;
    if(node.data.isDir){
        renameForm.value.name=node.data.name;
    }else{
        renameForm.value.name=node.data.name+"."+node.data.suffix;
    }
   
    renameForm.value.id=node.data.id;
}
function closeRename(){
    renameOpen.value=false;
    Object.assign(renameForm.value, {
      id: '',
      name: '',
      rename: ''
    });
}
function submitRename(){
    updateByName(renameForm.value).then(response => {
        handleQuery();
        emit('childGetList');
        closeRename();
        proxy.$modal.msgSuccess("重命名成功");
    });
}



//移动文件
const moveDataSource=reactive([]);
const moveTitle=ref('');
const moveOpen=ref(false);
const moveForm = ref({
    ids: '',
    parentId: ''
});
const queryMoveParams=reactive({
    fileName:''
});
const moveTreeRef = ref(null);
watch(queryMoveParams, (val) => {
    moveTreeRef.value.filter(val.fileName)
})
function moveFile(node,data) {
    moveOpen.value=true;
    moveTitle.value=node.data.title
    moveForm.value.ids=node.data.id;
    getDirTree().then(response => {
        Object.assign(moveDataSource, response.data); 
     });
}
function closeMove(){
    moveOpen.value=false;
    Object.assign(moveForm.value, {
        ids: '',
        parentId: ''
    });
    Object.assign(moveDataSource, {});
}
function submitMove(){
    moveForm.value.parentId=moveTreeRef.value.getCheckedKeys()[0];
    if(moveForm.value.parentId==moveForm.value.ids){
        proxy.$modal.msgError("不能移动到自己");
        return;
    };
    move(moveForm.value).then(response => {
        handleQuery();
        emit('childGetList');
        closeMove();
        proxy.$modal.msgSuccess("移动成功");
    });
}
function  handleNodeClick(data, checked) {
    if (checked) {
        moveTreeRef.value.setCheckedKeys([data.id]); // 只选中当前点击的节点
    }
}
</script>
  
<style scoped>
/* 在这里添加样式，如果需要的话 */
.custom-tree-node span {
    font-style: normal;
    cursor: pointer;
    font-style: normal;
    cursor: pointer;
}
.custom-tree-node:hover span {
    color: #fe7786 !important;
}

.custom-tree-node-btn{
    float: right;
}
.custom-tree-node-btn:hover  a{
    color: #7977fe !important;
}
.custom-tree-node-btn  a{
    padding-left: 6px;
}
.custom-tree-node  {
  width: 100%;
}
.truncate {
  display: inline-block; /* 确保元素为行内块，适应宽度 */
  max-width: 200px; /* 设置最大宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 使用省略号 */
}
  </style>